<template>
  <main class="h-full w-full">
    <div class="bg-white m-2 rounded">
      <el-space class="text-sm h-10 pl-5">新手指南</el-space>
      <hr class="hr" />
      <span class="w-full flex">
        <img
          class="p-10 ml-10"
          src="@/assets/titleLogo.png"
          style="width: 260px"
        />
        <div class="w-full">
          <span>
            <p
              class="pt-3 pb-3 text-2xl font-bold text-slate-600"
              style="margin: 0"
            >
              还不会使用 ?
            </p>
            <p class="text-sm font-bold text-slate-500" style="margin: 0">
              只需三步轻松上手
            </p>
          </span>

          <el-steps
            class="el-steps-css flex justify-center items-center"
            :align-center="true"
            :active="currentStep"
          >
            <!--  description="在这里我们开始创建数据集" -->
            <el-step
              class="w-full"
              title="创建数据集"
              @click.native="CreateDataSet"
            >
              <!-- 使用具名插槽添加自定义内容 -->
              <template #description>
                <p>在这里我们开始创建数据集</p>
                <el-button
                  type="primary"
                  :style="{
                    visibility: currentStep === 1 ? '' : 'hidden',
                  }"
                  >创建数据集</el-button
                >
              </template>
            </el-step>
            <el-step
              class="w-full"
              title="训练任务"
              @click.native="TrainingTask"
            >
              <!-- 使用具名插槽添加自定义内容 -->
              <template #description>
                <p>在这里我们开始训练任务</p>
                <el-button
                  type="primary"
                  :style="{ visibility: currentStep === 2 ? '' : 'hidden' }"
                  >训练任务</el-button
                >
              </template>
            </el-step>
            <el-step class="w-full" title="我的模型" @click.native="MyModel">
              <!-- 使用具名插槽添加自定义内容 -->
              <template #description>
                <p>在这里我们下载模型</p>
                <el-button
                  type="primary"
                  :style="{ visibility: currentStep === 3 ? '' : 'hidden' }"
                  >下载模型</el-button
                >
              </template></el-step
            >
          </el-steps>
        </div>
      </span>
    </div>
  </main>
</template>
<script setup>
//
import { ref } from "vue";
//
import { ElSteps, ElStep } from "element-plus";
//当前步骤
const currentStep = ref(1);
//创建数据集
function CreateDataSet() {
  console.log("创建数据集");
  currentStep.value = 1;
  //
  window.$router.push("/data_manage");
}

//训练任务
function TrainingTask() {
  console.log("训练任务");
  currentStep.value = 2;
}

//我的模型
function MyModel() {
  console.log("我的模型");
  currentStep.value = 3;
}
</script>
<!--  -->
<style>
.el-steps-css {
  width: 100%;
}

.el-step.is-horizontal {
  display: inline-block;
  cursor: pointer;
  align-items: center;
}
</style>
